.form-field {
  @apply mb-6 last-of-type:mb-0;
}

.form-field > label {
  @apply mb-1.5 inline-flex items-center text-sm font-semibold text-gray-600 dark:text-white;
}

.form-field > label.arg-label {
  @apply font-mono text-xs;
}

.form-field > label > svg {
  @apply ml-1.5 h-4 w-4 cursor-help dark:text-gray-500;
}

.argument-form .form-field > label {
  @apply font-mono text-xs;
}

.validation {
  @apply mt-2 flex items-center text-sm;
}

.validation svg {
  @apply mr-1 h-3 w-3;
}

.validation.warning {
  @apply text-orange-400;
}

.validation.error {
  @apply text-red-400;
}

.validation.success {
  @apply text-green-400;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  @apply border-gray-300 outline-none ring-gray-300;
}

.arg-label {
  @apply font-mono text-xs font-semibold text-gray-600 dark:text-white;
}
